<template>
  <div id="book-statistics" style="display: flex; flex-wrap: wrap; gap: 20px;">
    <!-- ECharts图表容器 -->
    <div ref="chart" style="flex: 1; min-width: 48%; height: 380px;"></div>
    <div ref="barChart" style="flex: 1; min-width: 48%; height: 300px;"></div>

    <!-- 公告列表 -->
    <div class="announcement-list" style="flex-basis: 100%; margin-top: 20px;">
      <h3>公告列表</h3>
      <ul class="announcement-items">
        <li v-for="item in announcementList" :key="item.id">
           {{ item.content }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getData } from '@/api/dashboard';
import { publiGetcList } from '@/api/public';

export default {
  name: 'BookStatistics',
  data() {
    return {
      //公告数据
      announcementList: [],
      // 统计数据
      bookCount: 1200,       // 图书数量
      readerCount: 500,      // 读者数量
      totalBorrowed: 3500,   // 借阅总数
      borrowedCurrently: 200, // 正在借阅的数量
      commentCount: 1500,    // 评论数量

      //借阅统计
      economy: 120, // 经济
      cultureScienceEducationSports: 150, // 文化，科学，教育，体育
      languageLiterature: 90, // 语言、文字
      literature: 200, // 文学
      marxism: 200, // 马克思主义、列宁主义、毛泽东思想
      philosophyReligion: 200, // 哲学、宗教
      socialScience: 200, // 社会科学总论
      politicsLaw: 200, // 政治，法律
      military: 200, // 军事
      art: 80 // 艺术
    };
  },
  mounted() {
    this.initChart();
    this.initBarChart();
    this.getData();
    this.getAnnouncement();
  },
  methods: {
    //获取公告数据
    getAnnouncement(){
      publiGetcList().then(res => {
        this.announcementList = res.data;
        console.log(res);
      }).catch(error => {
        console.error('获取公告数据失败:', error);
      })
    },
    // 获取数据
    getData(){
      getData().then(res => {
        //获取成功
        this.bookCount = res.data.bookCount;
        this.readerCount = res.data.readerCount;
        this.totalBorrowed = res.data.totalBorrowed;
        this.borrowedCurrently = res.data.borrowedCurrently;
        this.commentCount = res.data.commentCount;

        this.economy = res.data.economy;
        this.cultureScienceEducationSports = res.data.cultureScienceEducationSports;
        this.languageLiterature = res.data.languageLiterature;
        this.literature = res.data.literature;
        this.marxism = res.data.marxism;
        this.philosophyReligion = res.data.philosophyReligion;
        this.socialScience = res.data.socialScience;
        this.politicsLaw = res.data.politicsLaw;
        this.military = res.data.military;
        this.art = res.data.art;

       // 确保数据更新后 DOM 刷新
      this.$nextTick(() => {
      this.initChart();
      this.initBarChart();
    });
      }).catch(error => {
        //获取失败
        console.error('数据获取失败:', error);
      })
    },
    initChart() {
      // 获取图表容器
      const chartElement = this.$refs.chart;
      const chartInstance = echarts.init(chartElement);

      // 饼图配置项
      const option = {
        title: {
          text: '图书借阅数量统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '10%',
          left: 'center',
        },
        series: [
          {
            name: '借阅量',
            type: 'pie',  // 饼图
            radius: '50%',
            data: [
              { value: this.economy, name: '经济' },
              { value: this.cultureScienceEducationSports, name: '文化，科学，教育，体育' },
              { value: this.languageLiterature, name: '语言、文字' },
              { value: this.literature, name: '文学' },
              { value: this.marxism, name: '马克思主义、列宁主义、毛泽东思想' },
              { value: this.philosophyReligion, name: '哲学、宗教' },
              { value: this.socialScience, name: '社会科学总论' },
              { value: this.politicsLaw, name: '政治，法律' },
              { value: this.military, name: '军事' },
              { value: this.art, name: '艺术' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // 设置图表
      chartInstance.setOption(option);
    },
    initBarChart() {
      // 获取柱状图容器
      const barChartElement = this.$refs.barChart;
      const barChartInstance = echarts.init(barChartElement);

      // 柱状图配置项
      const barOption = {
        title: {
          text: '系统统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: ['图书数量', '读者数量', '借阅总数', '正在借阅', '评论数量'],
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '数量',
            type: 'bar', // 柱状图
            data: [this.bookCount, this.readerCount, this.totalBorrowed, this.borrowedCurrently, this.commentCount],
            itemStyle: {
              color: '#4CAF50'
            }
          }
        ]
      };

      // 设置柱状图
      barChartInstance.setOption(barOption);
    }
  }
};
</script>

<style scoped>
#book-statistics {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.announcement-list {
  flex-basis: 100%;
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.announcement-items {
  list-style-type: none;
  padding: 0;
}

.announcement-items li {
  font-size: 16px;
  margin: 10px 0;
}

.announcement-items li strong {
  color: #007bff;
}

.announcement-items li:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}
</style>
